<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>报工导出功能测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .test-section {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .test-button {
            background-color: #007bff;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px;
        }
        .test-button:hover {
            background-color: #0056b3;
        }
        .url-display {
            background-color: #f8f9fa;
            padding: 10px;
            border-radius: 5px;
            margin: 10px 0;
            word-break: break-all;
        }
        .success {
            color: green;
        }
        .error {
            color: red;
        }
    </style>
</head>
<body>
    <h1>报工导出功能测试</h1>
    
    <div class="test-section">
        <h2>1. 基础导出测试</h2>
        <p>测试无参数的导出功能</p>
        <button class="test-button" onclick="testBasicExport()">基础导出</button>
        <div id="basicExportResult"></div>
    </div>

    <div class="test-section">
        <h2>2. 条件导出测试</h2>
        <p>测试带参数的导出功能</p>
        <label>工序名称: <input type="text" id="processName" placeholder="装配"></label><br><br>
        <label>产品编号: <input type="text" id="productCode" placeholder="P001"></label><br><br>
        <label>工序状态: 
            <select id="processStatus">
                <option value="">全部</option>
                <option value="1">未开始</option>
                <option value="2">进行中</option>
                <option value="3">已完成</option>
            </select>
        </label><br><br>
        <button class="test-button" onclick="testConditionalExport()">条件导出</button>
        <div id="conditionalExportResult"></div>
    </div>

    <div class="test-section">
        <h2>3. 时间范围导出测试</h2>
        <p>测试时间范围的导出功能</p>
        <label>开始日期: <input type="date" id="startDate"></label><br><br>
        <label>结束日期: <input type="date" id="endDate"></label><br><br>
        <button class="test-button" onclick="testDateRangeExport()">时间范围导出</button>
        <div id="dateRangeExportResult"></div>
    </div>

    <div class="test-section">
        <h2>4. 完整参数导出测试</h2>
        <p>测试所有参数的导出功能</p>
        <button class="test-button" onclick="testFullExport()">完整参数导出</button>
        <div id="fullExportResult"></div>
    </div>

    <script>
        const WRITE_API_URL = 'http://localhost:5090/api';
        
        function showResult(elementId, message, isSuccess = true) {
            const element = document.getElementById(elementId);
            element.innerHTML = `<div class="${isSuccess ? 'success' : 'error'}">${message}</div>`;
        }

        function buildExportUrl(params = {}) {
            const searchParams = new URLSearchParams();
            
            // 添加所有参数
            Object.keys(params).forEach(key => {
                if (params[key] !== null && params[key] !== undefined && params[key] !== '') {
                    searchParams.append(key, params[key]);
                }
            });
            
            // 设置导出格式
            searchParams.append('exportFormat', 'xlsx');
            
            return `${WRITE_API_URL}/WorkReport/Export?${searchParams.toString()}`;
        }

        function downloadFile(url, filename) {
            fetch(url)
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }
                    return response.blob();
                })
                .then(blob => {
                    const downloadUrl = window.URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.style.display = 'none';
                    a.href = downloadUrl;
                    a.download = filename;
                    document.body.appendChild(a);
                    a.click();
                    window.URL.revokeObjectURL(downloadUrl);
                    document.body.removeChild(a);
                    return true;
                })
                .catch(error => {
                    console.error('下载失败:', error);
                    throw error;
                });
        }

        function testBasicExport() {
            const url = buildExportUrl();
            const resultDiv = document.getElementById('basicExportResult');
            
            resultDiv.innerHTML = `<div class="url-display">导出URL: ${url}</div>`;
            
            downloadFile(url, `报工数据_${new Date().toISOString().slice(0, 10)}.xlsx`)
                .then(() => {
                    showResult('basicExportResult', '基础导出成功！文件已下载。', true);
                })
                .catch(error => {
                    showResult('basicExportResult', `导出失败: ${error.message}`, false);
                });
        }

        function testConditionalExport() {
            const params = {
                processName: document.getElementById('processName').value,
                productCode: document.getElementById('productCode').value,
                processStatus: document.getElementById('processStatus').value
            };
            
            const url = buildExportUrl(params);
            const resultDiv = document.getElementById('conditionalExportResult');
            
            resultDiv.innerHTML = `<div class="url-display">导出URL: ${url}</div>`;
            
            downloadFile(url, `报工数据_条件导出_${new Date().toISOString().slice(0, 10)}.xlsx`)
                .then(() => {
                    showResult('conditionalExportResult', '条件导出成功！文件已下载。', true);
                })
                .catch(error => {
                    showResult('conditionalExportResult', `导出失败: ${error.message}`, false);
                });
        }

        function testDateRangeExport() {
            const params = {
                startDate: document.getElementById('startDate').value,
                endDate: document.getElementById('endDate').value
            };
            
            const url = buildExportUrl(params);
            const resultDiv = document.getElementById('dateRangeExportResult');
            
            resultDiv.innerHTML = `<div class="url-display">导出URL: ${url}</div>`;
            
            downloadFile(url, `报工数据_时间范围_${new Date().toISOString().slice(0, 10)}.xlsx`)
                .then(() => {
                    showResult('dateRangeExportResult', '时间范围导出成功！文件已下载。', true);
                })
                .catch(error => {
                    showResult('dateRangeExportResult', `导出失败: ${error.message}`, false);
                });
        }

        function testFullExport() {
            const params = {
                processName: '装配',
                productCode: 'P001',
                productName: '测试产品',
                processStatus: '2',
                producer: '张三',
                workOrderCode: 'WO001',
                startDate: '2024-01-01T00:00:00Z',
                endDate: '2024-12-31T23:59:59Z'
            };
            
            const url = buildExportUrl(params);
            const resultDiv = document.getElementById('fullExportResult');
            
            resultDiv.innerHTML = `<div class="url-display">导出URL: ${url}</div>`;
            
            downloadFile(url, `报工数据_完整参数_${new Date().toISOString().slice(0, 10)}.xlsx`)
                .then(() => {
                    showResult('fullExportResult', '完整参数导出成功！文件已下载。', true);
                })
                .catch(error => {
                    showResult('fullExportResult', `导出失败: ${error.message}`, false);
                });
        }

        // 设置默认日期
        document.addEventListener('DOMContentLoaded', function() {
            const today = new Date();
            const lastMonth = new Date(today.getFullYear(), today.getMonth() - 1, today.getDate());
            
            document.getElementById('startDate').value = lastMonth.toISOString().slice(0, 10);
            document.getElementById('endDate').value = today.toISOString().slice(0, 10);
        });
    </script>
</body>
</html> 